// Media Queries
@mixin breakpoint($min-width: null, $min-height: null, $medium: screen) {
  @if ($min-width != null and $min-height != null) {
    @media #{$medium} and (min-width: $min-width) and (min-height: $min-height) {
      @content;
    }
  } @else
  if ($min-width != null and $min-height == null) {
    @media #{$medium} and (min-width: $min-width) {
      @content;
    }
  } @else
  if ($min-width == null and $min-height != null) {
    @media #{$medium} and (min-height: $min-height) {
      @content;
    }
  }
}

// Creating triangles
@mixin triangle ($size, $color, $direction) {
  height: 0;
  width: 0;
  $width: nth($size, 1);
  $height: nth($size, length($size));
  $foreground-color: nth($color, 1);
  $background-color: if(length($color) == 2, nth($color, 2), transparent);
  @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
    $width: $width / 2;
    $height: if(length($size) > 1, $height, $height/2);
    @if $direction == up {
      border-bottom: $height solid $foreground-color;
      border-left: $width solid $background-color;
      border-right: $width solid $background-color;
    } @else
    if $direction == right {
      border-bottom: $width solid $background-color;
      border-left: $height solid $foreground-color;
      border-top: $width solid $background-color;
    } @else
    if $direction == down {
      border-left: $width solid $background-color;
      border-right: $width solid $background-color;
      border-top: $height solid $foreground-color;
    } @else
    if $direction == left {
      border-bottom: $width solid $background-color;
      border-right: $height solid $foreground-color;
      border-top: $width solid $background-color;
    }
  } @else
  if ($direction == up-right) or ($direction == up-left) {
    border-top: $height solid $foreground-color;
    @if $direction == up-right {
      border-left: $width solid $background-color;
    } @else
    if $direction == up-left {
      border-right: $width solid $background-color;
    }
  } @else
  if ($direction == down-right) or ($direction == down-left) {
    border-bottom: $height solid $foreground-color;
    @if $direction == down-right {
      border-left: $width solid $background-color;
    } @else
    if $direction == down-left {
      border-right: $width solid $background-color;
    }
  } @else
  if ($direction == inset-up) {
    border-color: $background-color $background-color $foreground-color;
    border-style: solid;
    border-width: $height $width;
  } @else
  if ($direction == inset-down) {
    border-color: $foreground-color $background-color $background-color;
    border-style: solid;
    border-width: $height $width;
  } @else
  if ($direction == inset-right) {
    border-color: $background-color $background-color $background-color $foreground-color;
    border-style: solid;
    border-width: $width $height;
  } @else
  if ($direction == inset-left) {
    border-color: $background-color $foreground-color $background-color $background-color;
    border-style: solid;
    border-width: $width $height;
  }
}


// Breakpoint-loop
// @include breakpoint-loop(width, (($medium, 80%), ($large, 50%)));
@mixin breakpoint-loop($element, $properties) {
    @each $property in $properties {
        $size: nth($property, 1);
        $value: nth($property, 2);

        @include breakpoint($size) {
            #{$element}: $value;
        }
    }
}


// Full stretching an item the size of it's parent.
// Remmeber that the parent can't have the position: static.
// otherwise this mixin won't work

@mixin full-absolute() {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
};
